<template>
	<view class="">
		<u-navbar :border-bottom="false" title="经销商签约" :title-size="36" :title-bold="true" :title-color="textColor" :background="{background: '#fff'}"></u-navbar>
		<view class="shop-header">
			<image :src="shopInfo.logoUrl||defaultLogo" mode="" class="shop-logo"></image>
			<view class="shop-name u-text-center">
				{{shopInfo.shopName}}
			</view>
			<view class="shop-user-title  u-text-center">
				企业负责人
			</view>
			<view class="shop-user-info u-text-center">
				{{shopInfo.principalName}}   				{{shopInfo.principalMobile}}
			</view>
		</view>
		<view class="u-flex u-row-center u-p-l-20 u-p-r-20" style="background-color: #fff;">
			<view class="" style="width: 280rpx;font-weight: 500;font-size: 32rpx;">
				收款方式设置
			</view>
			<u-cell-group class=""  :border="false">
				<u-cell-item :title-style="levelStyle" :border-bottom="false" @click="goSetColl"	 :title="shopTitle" :arrow="true" arrow-direction="right"></u-cell-item>
			</u-cell-group>
		</view>
		<view class="u-flex u-row-center u-p-l-20 u-p-r-20" style="background-color: #fff;">
			<view class="" style="width: 280rpx;font-weight: 500;font-size: 32rpx;">
				选择价格模板
			</view>
			<u-cell-group class=""  :border="false">
				<u-cell-item :title-style="levelStyle" :border-bottom="false" @click="getLevelList"	 :title="levelTitle" :arrow="true" arrow-direction="right"></u-cell-item>
			</u-cell-group>
		</view>
		<view class="">
			<view class="u-p-20 u-m-t-20 u-font-32" style="background-color: #fff;font-weight: 500;">
				已授权商品价格
			</view>
			<view class="u-flex u-col-center u-row-center" style="height: 500rpx;background-color: #fff;" v-if="!showProduct">
				<text>未选择价格模板</text>
				
			</view>
			<shopPrice v-if="showProduct" :templateId="chooseLevel"/>
		</view>
		
		<view class="apply-btn-container">
			<u-button class="apply-btn" @click="applySubmit">确定</u-button>
		</view>
		
		<u-popup mode="bottom" v-model="levelShow">
			<view class="level-show">
				<scroll-view scroll-y="true" style="height: 500rpx;">
					<view>
						<u-radio-group style="width: 100%;" v-model="chooseLevel" :wrap="true" :size="40" :icon-size="20" :label-disabled="false" shape="circle" :active-color="themeColor" >
							<u-radio 
								@change="levelChooseFn" 
								v-for="(item, index) in levelList" :key="index" 
								:name="item.id"
								class="choose-radio"
							>
							<text class="u-m-l-20">{{item.name}}</text>
							</u-radio>
						</u-radio-group>
					</view>
				</scroll-view>
				<view class="confrim-btn">
					<!-- <u-button @click="levelShow = false;">确定</u-button> -->
				</view>
			</view>
		</u-popup>
		<akLoading isFullScreen :active="loading"></akLoading>
	
	</view>
</template>

<script>
	import shopPrice from './compontents/shopPrice.vue';
	import { useShopStore } from '@/store/shop.js';
	import { mapState } from 'pinia';
	export default {
		data(){
			return{
				levelTitle:'请选择级别',
				shopTitle:'点击配置收款方式',
				loading:false,
				chooseLevel:'',
				chooseShop:'',
				levelShow:false,
				shopShow:false,
				levelList:[],
				shopList:[
				],
				showProduct:false,
				shopId:'bc34ae3f-e612-46f9-9719-08408e8cc360',
				qrcode:'',
				shopInfo:{
					
				},
				settlementMethod:0,
				maximumDebtAmount:'',
				shopCollectionIds:[],
			}
		},
		components:{
		shopPrice		
		},
		computed:{
			levelStyle(){
				let titleStyle = {};
				if(this.chooseLevel === ''){
					titleStyle.fontSize = '28rpx';
					titleStyle.color = '#999';
				}else{
					titleStyle.fontSize = '32rpx';
					titleStyle.fontWeight = 'bolder';
					titleStyle.color = '#333';
				}
				return titleStyle;
			},
			...mapState(useShopStore, {storeShop: 'shop'})
		},
		onLoad(options){
			this.qrcode = options.qrcode;
			this.getShopInfo();
			this.shopList = [
				{
					id:this.storeShop.id,
					name:this.storeShop.name
				}
			]
		},
		methods:{
			goSetColl(){
				this.$mRouter.push({ route: '/pages/sale/shezhi/ownerAuthSet?ownerName='+ this.storeShop.name+'&shopId='+this.storeShop.id+'&type=sale&settlementMethod='+this.settlementMethod+'&maximumDebtAmount='+this.maximumDebtAmount+'&shopCollectionIds='+JSON.stringify(this.shopCollectionIds)});
			},
			getValue(val){
				console.log(val);
				this.settlementMethod = val.settlementMethod;
				this.maximumDebtAmount = val.maximumDebtAmount;
				this.shopCollectionIds = val.shopCollectionIds;
				this.shopTitle = '已配置'
			},
			async getShopInfo(){
				this.loading = true;
				let params = {
					qrCodeData:this.qrcode,
				}
				const res = await this.$newHttp.post('api/Shop/v2/GetShopPrincipalForApp',params);
				this.loading = false;
				if(res.code === 200){
					this.shopId = res.data.shopId;
					this.shopInfo = res.data;
				}else{
					this.$u.toast('获取企业信息失败，错误信息：'+res.erroMessage);
					this.$mHelper.delayedJump();
				}
			},
			levelChooseFn(val){
				console.log(val);
				console.log(this.chooseLevel);
				this.showProduct =false;
				this.chooseLevel = val;
				this.$nextTick(() => {
						this.showProduct = true;
					})
				let index = this.levelList.findIndex(item=>{
					return item.id === val;
				});
				
				this.levelTitle = this.levelList[index].name;
			},
			async getLevelList(){
				this.loading = true;
				const res = await this.$newHttp.get('api/Shop/v2/getPriceTemplateList');
				this.loading = false;
				if(res.code === 200){
					this.levelList = res.data;
					// this.levelShow = true;
					if(this.levelList.length === 0){
						this.$u.toast('该店铺下没有可以选择的价格模板');
					}else{
						this.levelShow = true;
					}
				}else{
					this.$u.toast('获取可签约的销售商失败');
				}
			},
			async applySubmit(){
				this.loading = true;
				if(this.shopCollectionIds.length === 0){
					this.loading = false;
					this.$u.toast('收款方式不得为空！');
					return false;
				};
				if(this.chooseLevel === ''){
					this.loading = false;
					this.$u.toast('价格模板不得为空！');
					return false;
				};
				let params = {
					qrCodeData:this.qrcode,
					priceTemplateId:this.chooseLevel,
					settlementMethod:this.settlementMethod,
					maximumDebtAmount:this.maximumDebtAmount,
					shopCollectionIds:this.shopCollectionIds,
				}
				const res = await this.$newHttp.post('api/Shop/v2/SellerSigningPurchaserByQrCode',params);
				this.loading = false;
				if(res.code === 200){
					this.$u.toast('签约成功');
					this.$mHelper.delayedJump();
				}else{
					this.$u.toast('签约失败，错误信息：'+res.erroMessage)
				}
			},
		}
	}
</script>

<style lang="scss">
	.shop-header{
		background: #fff;
		overflow: hidden;
		margin-bottom: 20rpx;
		.shop-logo{
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin: 48rpx auto 30rpx;
			display:block;
		}
		.shop-name{
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
		}
		.shop-user-title{
			font-size: 24rpx;
			font-weight: 400;
			color: #999;
			margin: 60rpx 0 20rpx;
		}
		.shop-user-info{
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
			margin-bottom: 40rpx;
		}
	}
	.level-show{
		box-sizing: border-box;
		padding: 20rpx;
		.choose-radio{
			height: 100rpx;
			border:1px solid #eeeeee;
			margin-bottom: 20rpx;
			box-sizing: border-box;
			padding: 20rpx;
			::v-deep.u-radio__label{
				flex:1;
			}
		}
	}
	.apply-btn-container{
		// position: fixed;
		// bottom: 100rpx;
		width: 100%;		
		margin: 30rpx 0;
		z-index: 999;
		display: block;
		.apply-btn{
			width: 80%;
			height: 90rpx;
			background: linear-gradient(-90deg, #FFBB1A, #FFBB1A);
			border-radius: 45rpx;
			&::after{
				border: none;
			}
		}
	}
	
</style>
